<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0; padding: 0;
			}
			.box {
				float: left; position: relative; width: 300px; height: 300px;
				margin: 100px 200px; overflow: hidden;
			}
			.box > img {
				width: 300px; height: 300px;
			}
			
			.box > *{
				transition: 1s; position: absolute; left: 0px; top:  0px;
			}
			.box h2 {
				color: white; width: 200px;
				transform: translateX(10px) translateY(250px);
			}
			.box p {
				color: white;
			}
			.box p:nth-of-type(1) {
				transform: translateY(140px) translateX(-150px);
			}
			.box p:nth-of-type(2) {
				transform: translateY(180px) translateX(-110px);
				transition: 1s 0.1s;
			}
			.box p:nth-of-type(3) {
				transform: translateY(220px) translateX(-100px);
				transition: 1s 0.2s;
			}
			.box:hover p:nth-of-type(1) {
				transform: translateY(140px) translateX(10px);
			}
			.box:hover p:nth-of-type(2) {
				transform: translateY(180px) translateX(10px);
			}
			.box:hover p:nth-of-type(3) {
				transform: translateY(220px) translateX(10px);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img src="img/8.png" >
			<h2>Taylor Swift</h2>
			<p class="p1">Birthday:1989.12.13</p>
			<p class="p2">Height:180cm</p>
			<p class="p3">Weight:56kg</p>
		</div>
	</body>
</html>
